<script setup lang="ts">
  import Editor from '@/components/business/editor/Editor.vue'
  import { nextTick, ref, watch } from 'vue'
  import { useGetEnterpriseNoticeDetail } from '@/services/pages/enterprise-notice/useEnterpriseNotice'

  const { detail, getDetailLoading, getDetail } = useGetEnterpriseNoticeDetail()

  defineOptions({
    name: 'HomeNoticeModal',
  })

  const props = defineProps({
    noticeId: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      default: () => '公告',
    },
  })

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 编辑器组件实例
  const editorInstance = ref<InstanceType<typeof Editor> | null>(null)

  watch(visible, (value) => {
    if (value) {
      nextTick(() => {
        if (editorInstance.value) {
          editorInstance.value.mountEditor()
          getDetail(props.noticeId)
        }
      })
    }
  })
</script>

<template>
  <h-dialog v-model="visible" :title="props.name" :loading="getDetailLoading">
    <div class="container">
      <editor ref="editorInstance" readonly :value="detail.content"></editor>
    </div>
  </h-dialog>
</template>

<style scoped lang="scss">
  .container {
    height: 550px;
  }
</style>
